<script setup>
import { ref } from 'vue'

const current = ref(0)

const tabsList = ref([
    { name: '推荐' },
    { name: '爆款' },
    { name: '潮流热舞' },
    { name: '女神降临' },
    { name: '魅力男神' },
    { name: '魅力男神' },
    { name: '魅力男神' },
    { name: '魅力男神' },
])


// 页面跳转
function toPage(item) {
    console.log(item)
    uni.navigateTo({
        url: `/newEditionDraw/dancePerson/draw/index`
    })
}

// tabs切换
function tabsChange(e) {
    current.value = e.detail.index
}

// swiper切换
function swiperChange(e) {
    current.value = e.detail.current
}


</script>

<template>
    <div class='dancePerson'>
        <NavBar>舞动人像</NavBar>
        <div class="tabs">
            <van-tabs :active="current" title-active-color="#FFF" title-inactive-color="#D5D4DF" color="#83CD88"
                line-width="18" line-height="3" @change="tabsChange">
                <van-tab :title="item.name" v-for="item of tabsList" title-style="font-size: 28rpx"></van-tab>
            </van-tabs>
        </div>
        <div class="container">
            <swiper :current="current" @change="swiperChange" class="swiper">
                <swiper-item class="swiper_item" v-for="item of tabsList" @click="toPage(item)">
                    <div class="item" v-for="item of 7">
                        <img src="" class="coverImg" alt="">
                        <div class="content">
                            <div class="label">来财来财</div>
                            <div class="text">使用量1.1万 | 照片跳舞</div>
                        </div>
                    </div>
                </swiper-item>
            </swiper>
        </div>
    </div>
</template>

<style lang='scss' scoped>
::v-deep {
    .van-tabs__scroll {
        background-color: transparent;
    }
}

.dancePerson {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .tabs {
        margin-top: 28rpx;
    }

    .container {
        flex: 1;
        overflow: hidden;
        margin-top: 30rpx;
        padding-bottom: 30rpx;

        .swiper {
            height: 100%;
            overflow: hidden;

            .swiper_item {
                box-sizing: border-box;
                height: 100%;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-column-gap: 18rpx;
                grid-row-gap: 30rpx;
                padding: 0 30rpx;
                overflow: scroll;

                &::-webkit-scrollbar {
                    display: none;
                }

                .item {
                    box-sizing: border-box;
                    width: 100%;

                    .coverImg {
                        display: block;
                        width: 100%;
                        height: 560rpx;
                        border-radius: 15rpx;
                        background-color: skyblue;
                    }

                    .content {
                        margin-top: 12rpx;

                        .label {
                            color: #FFFFFF;
                            line-height: 33rpx;
                        }

                        .text {
                            font-size: 24rpx;
                            color: #D5D4DF;
                            margin-top: 5rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>